Creating a launcher icon with Adobe Photoshop template 2

Note: The necessary template file is available in the Nokia Icon Toolkit.

To create an icon with your own unique background, use the 2_S40_FT_Launcher_Icon_Photoshop_Template_INDIVIDUAL.psd template, and follow these simple steps to give your graphic the correct shape, shadows, and highlights.

Place your background graphic

Draw or paste your background graphic into Adobe Photoshop. In the layer palette (F7), ensure that it is placed inside the PLACE YOUR BACKGROUND HERE folder, above the MASK LAYER.

Figure 1.

Draw or paste your graphic into Adobe Photoshop. Ensure it is above the Mask Layer inside the PLACE YOUR BACKGROUND HERE folder.

Scale the background graphic

Scale (CTRL/CMD + t) your graphic to fit the dimensions of the canvas, and press the "Shift" key while you do so to ensure the graphic scales proportionally.

Option 1: Mask a background shape

If your background shape consists of an illustration or larger composition, you will need to mask it.

Select the black and white mask from the MASK LAYER and drag it into your background layer. The mask will apply the correct shape to your background.

If needed, you can move or resize your background by pressing the chain symbol (to unlock the mask), then selecting and adjusting your background graphic. To avoid flat, distorted edges, make sure your graphic is larger than the masking shape. Your final icon should be a smooth Squircle shape, as shown in the example.

Next, delete the white layer. The white MASK LAYER is simply a placeholder. Select this layer and press the trash can icon on the Layer palette’s bottom menu bar to delete it. This will reveal the transparent canvas.

Option 2: Use a custom background and a custom glyph

If you need to combine your background shape with a foreground glyph or logo, you can do so as follows:

Follow the previous set of steps to create and mask the custom background.
Draw your logo or glyph in Adobe Photoshop, directly onto the PLACE YOUR GLYPH HERE layer, or paste it from an existing Photoshop document.

Note: Photoshop typically creates a new layer for each new element that is pasted into a template document. To ensure your graphic is on the correct layer, select all the content on that layer (CTRL/CMD + a), cut the content (CTRL/CMD + x), then select the PLACE YOUR GLYPH HERE layer and paste the graphic onto it (CTRL/CMD + v).

With the graphic now placed on the correct layer, the correct shadow is automatically applied.

The colour of your graphic is set to white to ensure a good level of contrast between the glyph and the background. If needed, you can use any individual colour for your glyph by clicking the eye indicator of the Color Overlay (to undo the white colour overlay), then selecting and applying your custom colour.

The icon design is now complete. The final step is to save your icon as a PNG file.

Save as PNG

Select File > Save for Web & Devices, apply the settings shown in the screenshot below, and click Save. Respond to the dialogue to save your PNG icon in the directory of your choice. The icon is now ready for implementation.

Figure 2.

Be sure to keep a copy of the Photoshop file in case changes are required at a later date. If you want to produce another icon, please open the 2_S40_FT_Launcher_Icon_Photoshop_Template_INDIVIDUAL.psd again, and use a new file for each icon.

Note: The final PNG icon size should not exceed 30 kb. If your launcher icon is bigger, consider redrawing your icon with Adobe Illustrator or Inkscape.